<template>
  <div>
    <navigationBar />
    <div class="majors">

      <div class="major-content">
        <div class="majors-header">
          <div class="majors-header-image"></div>
          <div class="majors-header-search">
            <h1>专业信息咨询</h1>
            <p>了解专业资讯，全面审视自己，推动职业发展，从这里开始</p>
            <div class="search-input">
              <form>
                <input type="text">
                <el-button icon="el-icon-search"></el-button>
              </form>
            </div>
          </div>
        </div>
        <div class="headline">
          <div class="headline_title">
            你最想知道的专业介绍
          </div>
          <div class="headline_main">
            了解专业最新咨询，描绘用户真实画像，规划精彩人生
          </div>
        </div>
        <div class="components-majors">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="major in majorList" :label="major.majorName"  :name="major.id" :key="major.id">
              <div class="majors-item">
                <div class="majors-item-main">
                  <div class="majors-item-main-left">
                    <h3 style="color:  rgba(0,0,0,.87);">专业介绍：</h3>
                    <p>{{major.introduction}}</p>
                    <h3 style="color:  rgba(0,0,0,.87);">就业方向：</h3>
                    <p>{{major.employmentDirection}}</p>
                    <div @click="toDetail(major.id)">探索{{major.majorName}}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="components-Separator">
          <div class="separator-container">
            <div class="separator-item">
              <div class="separator-item-icon"><img src="../../assets/image/majors/separator-item1.svg" alt=""/></div>
              <div class="separator-item-content">最新IT资讯</div>
            </div>
            <div class="separator-item">
              <div class="separator-item-icon"><img src="../../assets/image/majors/separator-item2.svg" alt=""/></div>
              <div class="separator-item-content">更多在线课程</div>
            </div>
            <div class="separator-item">
              <div class="separator-item-icon"><img src="../../assets/image/majors/separator-item3.svg" alt=""/></div>
              <div class="separator-item-content">编程语言排行榜</div>
            </div>
          </div>
        </div>
        <!--编程语言模块-->
        <div class="ranking">
          <div class="ranking-view">
            <div ref="echartsArea" class="echarts-area" id="main"></div>
          </div>
        </div>
        <!--最新资讯模块-->
        <div class="information">
          <div class="information-container">
            <h2 class="information-title">
              你不知道的最新资讯
            </h2>
            <div class="information-main">
              <ul class="information-list">
                <li class="list-item">
                  <a href="javascript:">
                    <article>
                      <div class="list-item-img">
                        <img src="../../assets/image/majors/information-item1.png">
                      </div>
                      <div class="list-item-center">
                        <h3>
                          <i class="iconfont icon-zixun3"></i>
                          <span>
                        数字、智能化趋深，国家密码管理局推动《密码法》在广电行业落地
                      </span>
                        </h3>
                        <p>在日前召开的 CCBN
                          展会的网络安全论坛上，国家密码管理局商用密码管理办公室主任李国海表示，广电行业落实《密码法》是一个循序渐进的过程，目前国家密码管理局已经从五个方面入手推动密码法在广电行业的落地。
                        </p>
                      </div>
                      <div class="list-item-left">
                        <time>05月29日</time>
                        <small>网络安全</small>
                      </div>
                    </article>
                  </a>
                </li>
                <li class="list-item">
                  <a href="javascript:">
                    <article>
                      <div class="list-item-img">
                        <img src="../../assets/image/majors/information-item1.png">
                      </div>
                      <div class="list-item-center">
                        <h3>
                          <i class="iconfont icon-zixun3" style="font-size: 24px;"></i>
                          <span>
                        数字、智能化趋深，国家密码管理局推动《密码法》在广电行业落地
                      </span>
                        </h3>
                        <p>在日前召开的 CCBN
                          展会的网络安全论坛上，国家密码管理局商用密码管理办公室主任李国海表示，广电行业落实《密码法》是一个循序渐进的过程，目前国家密码管理局已经从五个方面入手推动密码法在广电行业的落地。
                        </p>
                      </div>
                      <div class="list-item-left">
                        <time>05月29日</time>
                        <small>网络安全</small>
                      </div>
                    </article>
                  </a>
                </li>
                <li class="list-item">
                  <a href="javascript:">
                    <article>
                      <div class="list-item-img">
                        <img src="../../assets/image/majors/information-item1.png">
                      </div>
                      <div class="list-item-center">
                        <h3>
                          <i class="iconfont icon-zixun3" style="font-size: 24px;"></i>
                          <span>
                        数字、智能化趋深，国家密码管理局推动《密码法》在广电行业落地
                      </span>
                        </h3>
                        <p>在日前召开的 CCBN
                          展会的网络安全论坛上，国家密码管理局商用密码管理办公室主任李国海表示，广电行业落实《密码法》是一个循序渐进的过程，目前国家密码管理局已经从五个方面入手推动密码法在广电行业的落地。
                        </p>
                      </div>
                      <div class="list-item-left">
                        <time>05月29日</time>
                        <small>网络安全</small>
                      </div>
                    </article>
                  </a>
                </li>
                <li class="list-item">
                  <a href="javascript:">
                    <article>
                      <div class="list-item-img">
                        <img src="../../assets/image/majors/information-item1.png">
                      </div>
                      <div class="list-item-center">
                        <h3>
                          <i class="iconfont icon-zixun3" style="font-size: 24px;"></i>
                          <span>
                        数字、智能化趋深，国家密码管理局推动《密码法》在广电行业落地
                      </span>
                        </h3>
                        <p>在日前召开的 CCBN
                          展会的网络安全论坛上，国家密码管理局商用密码管理办公室主任李国海表示，广电行业落实《密码法》是一个循序渐进的过程，目前国家密码管理局已经从五个方面入手推动密码法在广电行业的落地。
                        </p>
                      </div>
                      <div class="list-item-left">
                        <time>05月29日</time>
                        <small>网络安全</small>
                      </div>
                    </article>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts'
import navigationBar from "@/components/navigationBar/navigationBar";
import {getMajorList,getProgramData} from "../../api";

export default {
  name: 'majors',
  components: {
    navigationBar
  },
  data () {
    return {
      majorList:[],
      activeName: '618fc49d8c0a0a0ec281094d',
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['java', 'c语言', 'c++', 'javascript', 'python']
        },
        toolbox: {
          show: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      },
      lwList:[]
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    toDetail (id) {
      this.$router.push(
        {
          path:"/major/"+id
        }
      )
    },
    drawPie () {
      this.chart = echarts.init(this.$refs.echartsArea)
      this.chart.setOption(this.option)
    },
    async getMajorList(){
      let res = await getMajorList()
      console.log(res)
      if(res.success){
        this.majorList = res.data
        await this.getProgramData()
      }else{
        this.$message.error('获取专业信息失败')
      }
    },
    async getProgramData(){
      let res = await getProgramData()
      console.log(res)
      if(res.success){
        this.lwList = res.data
      }else{
        this.$message.error('获取编程排行榜信息是失败')
      }

      let lwSeries = []
      // 请洗后端返回的数据
      for (const index in this.lwList){
        let obj = {
          name:this.lwList[index].index,
          type:"line",
          data:this.lwList[index].value
        }
        lwSeries.push(obj)
      }
      this.option.series = lwSeries
      console.log(lwSeries)
      this.drawPie()
    }
  },
  mounted () {
    this.drawPie()
  },
  created () {
    this.getMajorList()

  }
}
</script>

<style scoped lang="scss">
@import "major";
</style>
